<template>
  <div>
    <!-- <div class="uni-notice"><span class="uni-online">访客在线人数：</span>   <span class="uni-offline">离线人数：</span></div> -->
    <el-form :inline="true" v-show="isSearchCollapse" class="query-form" style="background-color: #FFFFFF; margin: 0px 0px 30px 0px; padding: 0; text-align: center;" ref="searchForm" :model="searchForm"
      @keyup.enter.native="refreshList()" @submit.native.prevent>
      <!-- 搜索框-->
      <!-- <el-form-item style="margin: 0 10px;"  prop="createDate" label="登记时间">
        <el-date-picker
             v-model="searchForm.createDate"
             type="daterange"
             size="small"
             align="right"
             value-format="yyyy-MM-dd"
             unlink-panels
             range-separator="至"
             start-placeholder="开始日期"
             end-placeholder="结束日期">
          </el-date-picker>
      </el-form-item> -->
      <el-form-item style="margin: 0 10px;" prop="name" label="姓名">
        <el-input size="small" v-model="searchForm.name" placeholder="姓名" clearable></el-input>
      </el-form-item>
      <el-form-item prop="depart.id">
        <SelectTree ref="depart" placeholder="请选择部门" :props="{
                    value: 'id',             // ID字段名
                    label: 'name',         // 显示名称
                    children: 'childNodes'    // 子级字段名
                  }" size="small" url="/lora/user/jfLoraDepart/treeData" :value="searchForm.depart.id"
          :clearable="true" :accordion="true" @getValue="(value) => {searchForm.depart.id=value}" />
      </el-form-item>
      <el-form-item style="margin: 0 10px;" prop="code" label="工号">
        <el-input size="small" v-model="searchForm.code" placeholder="工号" clearable></el-input>
      </el-form-item>

      <!-- <el-form-item style="margin: 0 10px;" prop="phone" label="手机号">
        <el-input size="small" v-model="searchForm.phone" placeholder="手机号" clearable></el-input>
      </el-form-item> -->
      <el-form-item style="margin: 0 10px;" prop="rfid" label="工牌号码">
        <el-input size="small" v-model="searchForm.rfid" placeholder="工牌号码" clearable></el-input>
      </el-form-item>
      <el-form-item prop="rfidStatus">
        <el-select v-model="searchForm.rfidStatus" placeholder="请选择工牌状态" size="small" style="width: 100%;">
          <el-option v-for="item in $dictUtils.getDictList('rfid_status')" :key="item.value" :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item  style="margin: 0 10px;">
        <el-button type="primary" @click="refreshList()" size="small">查询</el-button>
        <el-button @click="resetSearch()" size="small">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="dataList" border size="medium"
      @sort-change="sortChangeHandle" v-loading="loading" class="table">
      <el-table-column prop="name" header-align="center" align="center"  show-overflow-tooltip sortable="custom" label="姓名">
        <template slot-scope="scope">
          <el-link type="primary" :underline="false" v-if="hasPermission('lora:user:jfLoraUser:edit')"
            @click="edit(scope.row.id)">{{scope.row.name}}</el-link>
          <el-link type="primary" :underline="false" v-else-if="hasPermission('lora:user:jfLoraUser:view')"
            @click="view(scope.row.id)">{{scope.row.name}}</el-link>
          <span v-else>{{scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="depart.name" show-overflow-tooltip sortable="custom" label="部门">
      </el-table-column>
      <el-table-column prop="code" show-overflow-tooltip sortable="custom" label="工号">
      </el-table-column>
      <!-- <el-table-column prop="createDate" header-align="center" align="center"  show-overflow-tooltip sortable="custom" label="登记时间">
      </el-table-column> -->
      <!-- <el-table-column prop="phone" header-align="center" align="center" show-overflow-tooltip sortable="custom" label="手机号">
      </el-table-column> -->
      <el-table-column prop="rfid" header-align="center" align="center" show-overflow-tooltip sortable="custom" label="工牌号码">
        <template slot-scope="scope">
          {{ scope.row.rfid && scope.row.rfid !==''  ? scope.row.rfid  : '未绑定/已解绑' }}
        </template>
      </el-table-column>
      <el-table-column prop="onlineTime"  header-align="center" align="center" show-overflow-tooltip sortable="custom" label="在线状态">
        <template slot-scope="scope">
          <el-tag key="在线" type="success" v-if="scope.row.isOnLine">在线</el-tag>
          <el-tag key="离线" type="info" v-else>离线</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="power" header-align="center" align="center" min-width="50px" show-overflow-tooltip sortable="custom" label="电量">
        <template slot-scope="scope">
          {{ scope.row.power || scope.row.power===0  ? scope.row.power+'%' : '-' }}
        </template>
      </el-table-column>
     <el-table-column prop="updateDate" header-align="center" align="center"  show-overflow-tooltip sortable="custom" label="操作时间">
     </el-table-column>
      <el-table-column header-align="center" align="center" fixed="right" width="200" label="操作">
        <template slot-scope="scope">
          <el-button :disabled="!scope.row.floorId || !scope.row.isOnLine" type="text" size="small" @click="current(scope.row)"><i class="iconfont icon-dituguanli"></i>实时位置</el-button>
          <el-button :disabled="!scope.row.existHistory" type="text" size="small" @click="history(scope.row)"><i class="iconfont icon-guiji"></i>历史轨迹</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageNo"
      :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" background
      layout="total, sizes, prev, pager, next, jumper">
    </el-pagination>
    <!-- 当前位置 -->
    <JfCurrentPosition ref="jfCurrentPosition" @onHistory="(row)=>{$refs.jfHistoryPosition.init(row)}"></JfCurrentPosition>
    <JfHistoryPosition ref="jfHistoryPosition"></JfHistoryPosition>
  </div>
</template>

<script>
  import JfCurrentPosition from './JfCurrentPosition'
  import JfHistoryPosition from './JfHistoryPosition'
  import SelectTree from '@/components/treeSelect/treeSelect.vue'
  export default {
    data() {
      return {
        searchForm: {
          createDate: [],
          name: '',
          userType: '1',
          depart: {
            id: ''
          },
          code: '',
          rfid: '',
          sex: '',
          phone: '',
          rfidStatus: '0'
        },
        dataList: [],
        pageNo: 1,
        pageSize: 10,
        total: 0,
        orderBy: 'rfid desc',
        isSearchCollapse: true,
        isImportCollapse: false,
        loading: false
      }
    },
    activated() {
      this.refreshList()
    },
    components: {
      JfCurrentPosition,
      JfHistoryPosition,
      SelectTree
    },
    computed: {
      onlineTime: {
        get () {
          if (!this.$store.state.config.backParam.onlineTime){
            return 1200
          }
          return this.$store.state.config.backParam.onlineTime
        }
      }
    },
    methods: {
      dateToState (value) {
        console.log(value)
        if (value) {
          return ((new Date()).getTime() - value) < this.onlineTime*1000 ? true : false
        } else {
          return false
        }
      },
      // 获取数据列表
      refreshList() {
        if(!this.searchForm.createDate) {
          this.searchForm.createDate = []
        }
        this.searchForm.onlineTime = (new Date()).getTime() - this.onlineTime*1000
        this.loading = true
        this.searchForm.userType = '1'
        this.$http({
          url: '/lora/user/jfLoraUser/list',
          method: 'get',
          params: {
            'pageNo': this.pageNo,
            'pageSize': this.pageSize,
            'orderBy': this.orderBy,
            beginCreateDate: this.searchForm.createDate[0] ? this.searchForm.createDate[0]+' 00:00:00' : this.searchForm.createDate[0],
            endCreateDate: this.searchForm.createDate[1]? this.searchForm.createDate[1]+' 23:59:59' : this.searchForm.createDate[1],
            ...this.lodash.omit(this.searchForm, 'createDate')
          }
        }).then(({
          data
        }) => {
          if (data && data.success) {
            this.dataList = data.page.list
            for(var i=0; i<this.dataList.length; i++) {
              this.dataList[i].isOnLine = this.dateToState(this.dataList[i].onlineTime)
              // this.dataList[i].isOnLine = this.dateToState(this.dataList[i].posUpdateTime)
            }
            this.total = data.page.count
            this.loading = false
          }
        })
      },
      current(row) {
        this.$refs.jfCurrentPosition.init(row)
      },
      history(row) {
        this.$refs.jfHistoryPosition.init(row)
      },
      // 每页数
      sizeChangeHandle(val) {
        this.pageSize = val
        this.pageNo = 1
        this.refreshList()
      },
      // 当前页
      currentChangeHandle(val) {
        this.pageNo = val
        this.refreshList()
      },
      // 排序
      sortChangeHandle(obj) {
        if (obj.order === 'ascending') {
          this.orderBy = obj.prop + ' asc'
        } else if (obj.order === 'descending') {
          this.orderBy = obj.prop + ' desc'
        } else {
          this.orderBy = ''
        }
        this.refreshList()
      },
      resetSearch() {
        this.$refs.searchForm.resetFields()
        this.refreshList()
      }
    }
  }
</script>
<style scoped lang="less">
.uni-notice {
  margin: 10px 0;
  font-size: 14px;
  width: 100%;
  text-align: center;
  .uni-online {
    color: #1d9d81;
    margin: 0 20px;
  }
}
.icon-dituguanli {
  font-size: 12px !important;
  margin-right: 5px;
  font-weight: bold;
}
.icon-guiji {
  font-size: 12px !important;
  margin-right: 5px;
  font-weight: bold;
}

</style>
